//js集合绑定 把集合循环出单个数据可以，html找单个 clone要（html模板提供一个就可以了）
//单个js对象绑定数据给对应的html
var count = 0;
var arrts;
var resultval;
/**
 *  关于绑定值 提供的基本表达式直接绑定 提供了 有.就是多层次表达式（最后一个点后面对应的层次的值才是要绑定值）
 * @param data
 * @param $htmlElements
 * @returns
 */
function dataBind(data,$htmlElements){
	for(key in data){
		var val = data[key];//key的 名称 例如 sno  name sex， data[key]拿到val
		$htmlElements.each(function(i,htmlElement){
		
		//如果元素的alt属性的值 和 json对象中  某个属性的key相等 将 这个json的这个属性的值绑定给这个元素
		//console.log($(htmlElement).attr('alt') + "   " + key);	
		if($(htmlElement).attr('alt')==key){  
	            var elementName = $(htmlElement)[0].tagName;
	            switch(elementName){
	            	case 'SPAN': $(htmlElement).text(val);break;
	            	case 'INPUT': 
	            		var type = $(htmlElement).attr('type');
	            		console.log(type);
	            		//如果是单选钮 并且 data过来的值 和单选钮本身的值相等，把整个单选钮选中 修改他的checked属性
	            		if(type=='radio'&&val==$(htmlElement).val()){
	            			$(htmlElement).attr('checked','checked');
	            		}else{
	            		 $(htmlElement).val(val);
	            		}     		
	            		break;
	            	case 'DIV': 
	  //如果找子元素为img的数量为0 说明子元素没有img直接赋值txt 不为0 有img 改imgsrc
	            		if($(htmlElement).find('img').length==0){
	            			 $(htmlElement).text(val);
	            		}else{
	            			 $(htmlElement).find('img').attr('src',"upload/"+val);
	            		}
	            		break;
	            	case 'SELECT':
	            		$(htmlElement).children('option').each(function(i,option){
	            			if($(option).value==val){
	            				$(option).attr('selected','selected');
	            			}
	            		});
	            		break;
	            	case 'TD':
	            		$(htmlElement).text(val);
	            		break;
	            	default:break;
	            }
									
			} //$("span") 标签为span元素  $(span) span是一个js对象把他变成jquery对象

		else if($(htmlElement).attr('alt')!=undefined&&$(htmlElement).attr('alt').indexOf(".")>=0){
			attrs = $(htmlElement).attr('alt').split('.');//这个根据点切割出的 数组就是 每一层的key
			//例如student.clazz.teacher.tname 就变成了一个 有3个数据的数组
			   //var  student = array[student]
			    // var clazz = student[clazz]
			//var teacher = clazz[teacher]
			//var tname = teacher[tname];

		if(attrs[0]==key){
//			for(var i=0;i< attrs.length;i++){
//				alert(attrs[i]);
//			}
			//
		//alert(getArrayItem(data,key,attrs.length));
            var elementName = $(htmlElement)[0].tagName;
            getArrayItem(data,key,attrs.length);
            val = resultval;
          //  alert(elementName);
//            alert(val);
            switch(elementName){
            	case 'SPAN':  $(htmlElement).text(val);break;
            	case 'INPUT': 
            		var type = $(htmlElement).attr('type');
            		console.log(type);
            		// 如果是单选钮 并且 data过来的值 和单选钮本身的值相等，把整个单选钮选中 修改他的checked属性
            		if(type=='radio'&&val==$(htmlElement).val()){
            			$(htmlElement).attr('checked','checked');
            		}else{
            		 $(htmlElement).val(val);
            		}     		
            		break;
            	case 'DIV': 
  // 如果找子元素为img的数量为0 说明子元素没有img直接赋值txt 不为0 有img 改imgsrc
            		if($(htmlElement).find('img').length==0){
            			 $(htmlElement).text(val);
            		}else{
            			 $(htmlElement).find('img').attr('src',"upload/"+val);
            		}
            		break;
            	case 'SELECT':
            		$(htmlElement).children('option').each(function(i,option){
            			if($(option).value==val){
            				$(option).attr('selected','selected');
            			}
            		});
            		break;
            	default:break;
            }
								
		} // $("span") 标签为span元素 $(span) span是一个js对象把他变成jquery对象
		}
		});
	};
}

//获取数组的值 距离  sc.course.teacher  调用这个方法  总次数不变，但是执行一次 统计加一直到最后
var subKey ;
function getArrayItem(arrays,key,length){
	
	if(count < length - 1){

		count ++;
		//没调用一层方法 count+ 这个count不能是递归方法的成员变量
		arrays = arrays[key];//数组取值方法正常执行就是 从数组对象中取一个key对应的值
		subKey = attrs[count];
//		console.log("---------------------");
//		console.log(subKey);
//		console.log(count + "  "+ (length - 1));
		console.log(arrays[subKey])
           if(count == length - 1){
        	   count = 0 ;
        	   resultval = arrays[subKey];//java声明了返回值 在最内层的return会一路return到最初所以可以得到返回值，但是js不行
           }else{
			 getArrayItem(arrays,subKey,length);
           }
	
		}
}


//这里表示有一个变量叫data 他是一个json对象 他其中一个属性叫lis 这个lis 是一个数组
var data = {'lis':['x','z','y']};

//第一个参数是待绑定的数据集，第二个参数 要克隆html模板 第三个参数 有值表示 赋值的对象是克隆对象的子元素，
//如果没有赋值对象就是克隆对象
//isFirstRow 如果调用方法的 代码没有传递 isFirstRow 这个参数 就使用默认值
function datasBind(datas,$htmlElementTemplate,htmlPattern,isFirstRow=true){
	$htmlElementTemplate.show();
	//移除旧的值
	$htmlElementTemplate.eq(0).nextAll().each(function(index,children){
	        $(children).remove();
	});

	//数据集有值 则循环开始
	//等待拷贝的对象，等待赋值对象
     for(var index = 0;index < datas.length;index++){
    	 let data = datas[index];
    	 let $currHtmlElment;
    	 //如果 第三个参数为空 待修改的 html 就是传入的html本身,如果不为空 待修改的值是传入的html子元素

    	 
    	 //如果是第一个 只改值不克隆 不追加
    	 if(index==0){
             if(htmlPattern==null){
            	 $currHtmlElment = $htmlElementTemplate;//克隆对象用来复制
             }else{
            	 $currHtmlElment = $htmlElementTemplate.find(htmlPattern);//克隆对象的子元素用来赋值
             }
       		 dataBind(data,$currHtmlElment);
         }else{//克隆改值 并追加,但是需要判断要考值的 元素 是 传入的元素还是传入元素的子元素
        	 let $cloneHtmlElement = $htmlElementTemplate.clone();//等号右边clone出了一个匿名对象，赋值给等号左边的对象
             if(htmlPattern==null){
            	 $currHtmlElment = $cloneHtmlElement;
             }else{
            	 $currHtmlElment = $cloneHtmlElement.find(htmlPattern);
             }
    		 dataBind(data,$currHtmlElment);
    		 $htmlElementTemplate.parent().append($cloneHtmlElement);
    		 
         } 
    	
    	 
		
     }
	
	 if(datas.length == 0){
		 //没有数据的二级页面拷贝模板，拷贝数据，不显示
			//$cloneHtmlElement.html()
		 $htmlElementTemplate.hide();
		 if(isFirstRow == false){
			 $htmlElementTemplate.prev().hide();
		 }
		}
	}

	//体现vue在html 标签上面添加 特殊属性 实现特定效果的思路，遍历所有标签有特殊标记的 取出值再处理
	function myvueinit(){

		var that = this;

		$('body').find("li").each(function(index,li){
			let vforval = $(li).attr('v-for');
			if(vforval!=undefined){
				for(index in that.data[vforval]){
		
		          $(this).parent().append( $(this).clone());
				}
			}
		});
	}
